<!--
 * @Author: your name
 * @Date: 2020-08-04 16:11:09
 * @LastEditTime: 2020-08-05 09:19:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devops\VueElementUINew\src\components\UserSelectPopover\index.vue
-->
<template>
  <el-popover
    popper-class="user-select-popper"
    :ref="name"
    :placement="placement"
    :width="width"
    :visible-arrow="false"
    :trigger="trigger">
    <div>
      <el-input size="mini" v-model="searchKey" placeholder="搜索人员"></el-input>
      <ul>
        <li
          v-for="(item, index) in userList"
          :key="index"
          @click="selectChange(item.id)"
        >
          <img :src="item.avatar" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <slot slot="reference" />
  </el-popover>
</template>

<script>
export default {
  name: 'UserSelectPopover',
  props: {
    name: {
      type: String,
      default: 'userPopover'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    width: {
      type: [Number, String],
      default: 200
    },
    trigger: {
      type: String,
      default: 'click'
    },
    userList: {
      type: Array,
      default: () => {
        return [{
          id: 'liuyi',
          name: '刘一',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'chener',
          name: '陈二',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhangsan',
          name: '张三',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'lisi',
          name: '李四',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'wangwu',
          name: '王五',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhaoliu',
          name: '赵六',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'sunqi',
          name: '孙七',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhouba',
          name: '周八',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'wujiu',
          name: '吴九',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhengshi',
          name: '郑十',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }]
      }
    }
  },
  data() {
    return {
      searchKey: ''
    }
  },
  methods: {
    selectChange(id) {
      this.$emit('select-change', id)
    }
  }
}
</script>

<style lang="scss">
.user-select-popper {
  width: 174px;
  ul {
    margin-top: 8px;
    height: 240px;
    overflow: auto;
    li {
      display: flex;
      cursor: pointer;
      padding: 4px 0;
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
      span {
        margin-left: 10px;
      }
    }
  }
}
</style>